<template>
  <div class="template-wrap">
    <div class="icon-mod" @click="toBack">
      <i class="el-icon-back"></i>
    </div>
    <i class="el-icon-loading big-loading" v-if="contentLoading"></i>
    <iframe v-else class="ifram-wrapper" :src="iframeSrc" width="100%" height="900px"> --> </iframe>
  </div>
</template>

<script>
import { getExternalLink } from '@common/api/staff';
export default {
  data() {
    return {
      iframeSrc: '',
      contentLoading: true,
    };
  },
  created() {
    const { sealId } = this.$route.query;
    getExternalLink({
      Module: 'SEAL',
      ModuleId: sealId,
      MenuStatus: 'DISABLE',
    }).then(
      data => {
        if (data.data.ConsoleUrl) {
          this.iframeSrc = data.data.ConsoleUrl;
        } else {
          this.$message({
            message: '获取印章信息失败',
            type: 'warning',
          });
        }
        this.contentLoading = false;
      },
      () => {
        this.contentLoading = false;
        this.$message({
          message: '获取印章信息失败',
          type: 'warning',
        });
      },
    );
  },
  methods: {
    toBack() {
      this.$router.push({
        path: '/seal-manager',
      });
    },
  },
};
</script>

<style scoped lang="scss">
.template-wrap {
  position: absolute;
  top: 94px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

  .icon-mod {
    position: absolute;
    top: 13px;
    left: 15px;
    z-index: 9;
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: #fff;
    cursor: pointer;
    .el-icon-back {
      font-size: 20px;
      font-weight: bold;
      color: #2772f6;
    }
  }
  .ifram-wrapper {
    width: 100%;
    height: calc(100% + 51px);
  }
}
.ifram-mod {
  top: -51px;
  // left: 1px;
}
.big-loading {
  display: block;
  width: 50px;
  height: 50px;
  margin: 50px auto;
  font-size: 48px;
  color: rgb(64, 158, 255);
}
</style>

